<template>
  <div>
    <div>
      <unlogin-nav-header v-if="!logined"></unlogin-nav-header>
      <login-nav-header v-else></login-nav-header>
    </div>
    <div class="wrapper">
      <div class="container">
        <h3>用户登录</h3>
        <hr />
        <p class="bg-danger err-msg" :style="isShowErrorMsg">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
          {{status.errMsg}}
        </p>
        <div class="input-group">
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          </span>
          <input type="text" class="form-control" placeholder="用户名" v-model="loginInfo.username" />
        </div>
        <div class="input-group">
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
          </span>
          <input type="password" class="form-control" placeholder="密码" v-model="loginInfo.password" />
        </div>
        <button type="button" class="btn btn-success" @click="login">登录</button>
        <p class="append-btn">免费注册</p>
        <p class="append-btn">忘记密码</p>
      </div>
    </div>
  </div>
</template>
<script>
import UnloginNavHeader from "@/components/unlogin-nav-header/UnloginNavHeader";
import LoginNavHeader from "@/components/login-nav-header/LoginNavHeader";
export default {
  components: {
    UnloginNavHeader,
    LoginNavHeader
  },
  data () {
    return {
      loginInfo: {
        username: "",
        password: ""
      },
      status: {
        error: false,
        errMsg: ""
      },
      logined: false
    };
  },
  methods: {
    login () {
      this.status.error = !this.status.error;
    }
  },
  computed: {
    isShowErrorMsg () {
      if (this.status.error) {
        return {
          visibility: "visible"
        };
      }
      return {};
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/style/common-panel-var.styl';

.wrapper {
  height: 350px;
  background-color: $panelColor;
  margin-top: $panelMarginTop;
  padding-top: $panelPaddingTop;
  padding-bottom: $panelPaddingBottom;

  .container {
    width: $containerWidth;
    margin: 0 auto;
    height: 300px;
    background-color: $containerBgColor;
    border-radius: $containerBorderRadius;
    border: $containerBorder;

    h3 {
      text-align: center;
      margin-bottom: 10px;
    }

    hr {
      width: 90%;
      margin: 0 auto;
      border-color: black;
      margin-bottom: 5px;
    }

    .err-msg {
      width: 90%;
      padding-left: 15px;
      margin: 0 auto;
      font-weight: bold;
      height: 25px;
      line-height: 25px;
      visibility: hidden;
    }

    .input-group {
      width: 90%;
      margin: 0 auto;
      margin-top: 15px;
    }

    .btn.btn-success {
      margin: 0 auto;
      width: 90%;
      display: block;
      margin-top: 15px;
    }

    .append-btn {
      float: right;
      margin-top: 15px;
      margin-right: 15px;
      color: $appendBtnColor;
      cursor: pointer;
    }

    .append-btn:hover {
      color: $appendBtnHoverColor;
    }
  }
}
</style>
